<template>
	<view class="box-main">

		<view class="box-top-bg">
			<!-- 导航栏 -->
			<view class="head-wrapper" id="home" :style="{ top: homeTop + 'rpx' }">
				<view class="head-menu">
					<view class='iconfont icon-fanhui2' @click="returns"></view>
					<view class="iconfont icon-shouye" @click="showNav"></view>
				</view>
			</view>
			<!-- end -->

			<view :style="{height: (homeTop+80) + 'rpx'}">
			</view>

		</view>


		<view class="box-item-p shadow-2 p-20" style="background: rgba(255, 255, 255, 0.5);">
			<view style="color: #353535; " class="fs-36 fw ml-10">
				<text>被对接人</text>
			</view>
			<view>
				<view @click="viewDesc" class="mt-30 flex ac sb ">
					<view class="flex">
						<view>
							<image :src="cardDetail.avatar" mode="aspectFill"
								style="width: 90rpx;height: 90rpx;border-radius: 100%;"></image>
						</view>
						<view>
							<view class="ml-20">
								<text class="fw fs-32">{{cardDetail.name || ''}}</text>
								<text class="ml-5 mr-10">/</text>
								<text class=" fs-24"
									style="color: #BCBCBC;">{{cardDetail.position.position || ''}}</text>
								<text class="iconfont-yjgs fs-36 ml-10" style="color: #00009E;">
									&#xe6eb;
								</text>
							</view>
							<view class="fs-24 ml-20 mt-10 line-1">
								<text style="color: #BCBCBC;">{{cardDetail.position.company_name || ''}}</text>
							</view>
						</view>
					</view>
					<view>
						<text class="iconfont icon-gengduo3 fs-26"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="box-item-p shadow-2 p-20 mt-30" style="height: auto;">
			<view style="color: #353535; " class="fs-36 fw ml-10">
				<text>申请人</text>
			</view>
			<view style="color: #9B9B9B;" class="mt-10 ml-10">
				<text>{{itemObj.name || ''}}</text>
				<text class="ml-20">{{itemObj.phone || ''}}</text>
			</view>

			<view class="mt-30 mb-50" style="width: 100%;height: 1px;background-color:#F3F3F3 ;"></view>

			<view style="color: #353535; " class="fs-36 fw ml-10">
				<text>给对方留言</text>
			</view>
			<view style="height: 200rpx;" class="mt-20 ml-10">
				<textarea style="width: 100%;" placeholder-style="color: #9B9B9B;height: 200rpx;"
					v-model="form.textareaVal" placeholder="请填写留言申请，告知对接目的，可以提高对接成功率哦～"></textarea>
			</view>
			<view class="mla wfc" style="color: #BEBEBE;">
				<text>{{form.textareaVal.length}}/150</text>
			</view>
		</view>

		<view @click="submitClick" class="box-footer shadow-2">
			<view class="box-f-btn mt-5 fs-30">
				提交申请
			</view>
		</view>


		<!-- 提交申请弹出 -->
		<uni-popup :is-mask-click='false' :mask-click='false' ref="popuplnterest" type="center"
			border-radius="10px 10px 0 0">
			<view class="popuplnterest">
				<view class="flex ac jc fc" style="margin-top: 5vh;">
					<view>
						<image src="https://yjgs.jsonbug.com/storage/default/20241023/shenqfs.png"
							style="width: 509rpx;height: 396rpx;">
						</image>
					</view>
					<view class="mt-30 fw" style="font-size: 48rpx;color: #000;">
						申请发送成功
					</view>
				</view>
				<view class="flex ac jc fc" style="margin-top: 2vh;">
					<view class=" fs-34" style="color: #212121;">
						请等待对方同意
					</view>
					<view class="mt-20" style="color: #B2B2B2;">
						遇见贵商，互助互帮
					</view>
				</view>
				<view @click="closeClick" class="box-btn-phone">
					<text>我知道了</text>
				</view>
			</view>
		</uni-popup>
		<!-- end -->



	</view>
</template>

<script>
	import {
		cardDetail,
		cardShare
	} from '@/api/extend.js'
	export default {
		data() {
			return {
				options: {},
				itemObj: {}, // 我自己的名片信息
				form: {
					textareaVal: ''
				},
				homeTop: 88,
			}
		},
		onReady() {
			this.$nextTick(function() {
				// #ifdef MP
				const menuButton = uni.getMenuButtonBoundingClientRect();
				const query = uni.createSelectorQuery().in(this);
				query
					.select('#home')
					.boundingClientRect(data => {
						this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
					})
					.exec();
				// #endif
			});
		},
		onLoad(options) {
			this.options = options
			this.cardDetailFunc();
		},
		computed: {
			cardDetail() {
				return this.$store.state.extend.cardDetail;
			}
		},
		methods: {
			viewDesc() {
				uni.navigateBack();
			},
			cardDetailFunc() {
				cardDetail({
					id: this.options.id
				}).then(res => {
					this.itemObj = res.data;
				})
			},
			closeClick() {
				this.$refs.popuplnterest.close();
				uni.$emit('send_apply_refer');
				setTimeout(() => {
					uni.navigateBack();
				}, 500)
			},
			submitClick() {
				uni.showLoading({
					title: '请求中...',
					mask: true
				})
				cardShare({
					re_uid: this.cardDetail.uid,
					remark: this.form.textareaVal,
					card_id: this.cardDetail.id,
				}).then(res => {
					uni.hideLoading();
					if (res.status == 200) {
						this.$refs.popuplnterest.open('center');
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err,
						icon: 'none',
						duration:4000
					})
				})
			},
			// 后退
			returns() {
				uni.navigateBack({
					fail() {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				})
			},
			// 首页
			showNav() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box-btn-phone:active {
		opacity: .6;
	}

	.box-btn-phone {
		font-weight: bold;
		margin-top: 2vh;
		border-radius: 10rpx;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		color: white;
		background-color: #00009E;
	}

	.popuplnterest {
		padding: 20rpx;
		width: 90vw;
		height: 55vh;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.box-f-btn:active {
		opacity: .5;
	}

	.box-f-btn {
		border-radius: 8rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;
		width: 100%;
		background-color: #00009E;
	}

	.box-footer {
		z-index: 999;
		padding: 10rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		color: white;
		background-color: white;
		width: 100%;
		// height: 120rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx); ///兼容 IOS<11.2/
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx); ///兼容 IOS>11.2/
		height: calc(120rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(120rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}

	.box-item-p {
		margin-left: auto;
		margin-right: auto;
		top: -200rpx;
		position: relative;
		width: calc(100% - 60rpx);
		height: 220rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
	}

	.head-wrapper {
		z-index: 999;
		display: flex;
		align-items: center;
		position: fixed;
		left: 30rpx;
		top: 0;
	}

	.head-menu {
		display: flex;
		align-items: center;
		height: 58rpx;
		width: 158rpx;
		background: rgba(255, 255, 255, 0.302);
		border: 2rpx solid rgba(0, 0, 0, 0.0588);
		border-radius: 29rpx;

		.iconfont {
			flex: 1;
			text-align: center;
			color: #000000;
			box-sizing: border-box;

			&.icon-fanhui2 {
				border-right: 1px solid rgba(0, 0, 0, 0.2);
				;
			}
		}
	}

	.box-top-bg {
		width: 100%;
		height: 620rpx;
		background-image: url('https://yjgs.jsonbug.com/storage/default/20241016/jiaoh.png');
		background-size: 100% 100%;
	}

	.box-main {
		background-color: #F4F5FA;
	}
</style>